import Taro, {Component} from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {loanUppers, terms, guaranteeIndex} from '../../config/index'

import './Accordion.scss'

export default class Accordion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      defaultIndex: props.defaultIndex,
    }
  }

  //单击下拉框中的选项
  itemClick(index) {
    this.setState({
      defaultIndex: index
    })
    this.props.onClick();
    this.props.onSelected(index);
  }

  changeItem(pIndex, index, event) {
    let selected = this.props.selectedIndex;
    selected[pIndex] = index;
    this.setState({
      defaultIndex: selected
    })
    let data = {
      loanUpper: loanUppers[selected[0]],
      guaranteeMode: guaranteeIndex[selected[1]],
      term: selected[2],
      loanTermLower: terms[selected[2]][0],
      loanTermUpper: terms[selected[2]][1]
    }
    this.props.onSelected(data);
    event.stopPropagation();
  }

  render() {
    let {value, isCollapsed} = this.props;
    let sign = isCollapsed ? 'down' : 'down up'; //小三角形样式类
    let option = isCollapsed ? 'option' : 'option hide'; //下拉选项样式类
    let data1 = ['不限', '50万及以下', '100万及以下', '200万及以下', '500万及以下', '1000万及以下', '1000万以上'];
    let data2 = ['不限', '信用', '抵押', '质押', '信保基金', '一般保证'];
    let data3 = ['不限', '一年以上', '1-3年', '3-5年', '5年以上'];
    const style = {
      active: {
        fontSize: '14px',
        fontFamily: 'PingFangSC-Medium, PingFang SC',
        fontWeight: 500,
        color: 'rgba(213, 143, 67)',
        lineHeight: '20px'
      },
      active2: {
        color: 'rgba(213,143,67,1)'
      }
    }
    let content = (value.length !== 0) ? <View></View> :
      <View className='content'>
        <View className='option2'>
          <View className='title2'>贷款额度</View>
          <View>
            {data1.map((item, index) => (
              <Text className='item2' key={index} style={index===this.props.selectedIndex[0]?style.active2:{}} onClick={(event) => {this.changeItem(0, index, event)}}>{item}</Text>
            ))}
          </View>
        </View>
        <View className='option2'>
          <View className='title2'>担保方式</View>
          <View>
            {data2.map((item, index) => (
              <Text className='item2' key={index} style={index===this.props.selectedIndex[1]?style.active2:{}} onClick={(event) => {this.changeItem(1, index, event)}}>{item}</Text>
            ))}
          </View>
        </View>
        <View className='option2'>
          <View className='title2'>贷款期限</View>
          <View>
            {data3.map((item, index) => (
              <Text className='item2' key={index} style={index===this.props.selectedIndex[2]?style.active2:{}} onClick={(event) => {this.changeItem(2, index, event)}}>{item}</Text>
            ))}
          </View>
        </View>
      </View>;
    return (
      <View className='wrapper'>
        <View className='title' onClick={() => this.props.onClick()}>
          {this.props.title}
          <View className={sign}></View>
        </View>
        <View className={option} >
          {
            value.map((item, index) => (
            <View
              className='item' key={index}
              style={index == this.state.defaultIndex ? style.active : {}}
              onClick={this.itemClick.bind(this, index)}
            >
              {item}
            </View>
          ))}
        </View>
        <View className={option}>
          {content}
        </View>
      </View>
    )
  }
}
Accordion.defaultProps = {
  value: [],
  selectedIndex: [0, 0, 0]
}
